<template>
  <!--  面包屑-->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/main' }">主页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="/teacher">教师信息表</a></el-breadcrumb-item>
  </el-breadcrumb>

  <div class="box">
    <div class="table-oper">
<!--      <el-button-group class="oper-left">-->
<!--        <el-button type="danger">批量删除</el-button>-->
<!--      </el-button-group>-->
      <el-form :inline="true" :model="teacherList" class="oper-right">
        <el-form-item label="姓名">
          <el-input v-model="keyword" placeholder="请输入教师姓名或邮箱" />
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="teacherList.data" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="80" />
      <el-table-column prop="name" label="姓名"  />
      <el-table-column prop="email" label="邮箱"  />
      <el-table-column prop="avatar" label="头像"  >
        <template #default="{row}">
          <img v-if="row.avatar" :src="row.avatar" alt="头像" style="width: 50px; height: 50px; border-radius: 50%" />
        </template>
      </el-table-column>
      <el-table-column prop="role" label="角色"  />
      <el-table-column prop="describe" label="描述"  />
      <el-table-column prop="sex" label="性别"  />
      <el-table-column prop="createTime" label="创建时间"  />
      <el-table-column prop="lastModifiedTime" label="最后修改时间"  />
      <el-table-column prop="status" label="状态"  />

      <el-table-column fixed="right" label="操作" style="width: auto">
        <template #default="{row}">
          <el-button link type="danger" size="small" @click="row.status ? recover(row.id) : del(row.id)" > {{ row.status ? '恢复' : '删除' }}</el-button>
          <el-button link type="success" size="small" @click="changeRole(row.id)" >改变角色</el-button>
          <!-- 编辑按钮 -->
<!--          <el-button link type="primary" size="small" @click="isEditing = true">编辑</el-button>-->

<!--          &lt;!&ndash; 弹窗 &ndash;&gt;-->
<!--          <el-dialog-->
<!--              v-model="isEditing"-->
<!--              title="编辑弹窗"-->
<!--              @close="isEditing = false"-->
<!--              :append-to-body="false"-->
<!--          >-->
<!--            &lt;!&ndash; 编辑弹窗的内容，例如表单 &ndash;&gt;-->
<!--            <el-form :model="form" label-width="120px">-->
<!--              <el-form-item label="Activity zone">-->
<!--                <el-select v-model="form.school" placeholder="选择学校">-->
<!--                  <el-option label="Zone one" value="shanghai" />-->
<!--                  <el-option label="Zone two" value="beijing" />-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-form>>-->
<!--          </el-dialog>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :background="true"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        class="pagination"
        style="float: right"
    />
  </div>
</template>

<script setup>
import { ElMessageBox,ElMessage } from 'element-plus'
import {ref,reactive,getCurrentInstance,onMounted} from 'vue'
import axios from "axios";
const {proxy}=getCurrentInstance();//proxy就代表Vue对象
import userApi from '../api/public/public.js'

//将数组数据包含成一个对象
let list=reactive({data:[]});
let key=reactive({data:[]});
let teacherList=reactive({
  id: "",
  name: "",
  email: "",
  avatar: "",
  role: "",
  sex:"",
  describe:"",
  createTime: "",
  lastModifiedTime: "",
  status: "",
});
let form=reactive({
  name: "",
  email: "",
  avatar: "",
  role: "",
  sex:"",
  describe:"",
  createTime: "",
  lastModifiedTime: "",
  status: "",
});
let number=ref(1);
let pageSize=ref(10);
let total=ref(1);
let pageNum=ref(0);
let keyword=ref("");
const isEditing = ref(false);
//删除功能
const del = (uid) => {
  console.log("uid:"+uid)
  ElMessageBox.confirm(
      '确定要删除吗？',
      '提示',
      { confirmButtonText: '确定', cancelButtonText: '返回', type: 'warning' }
  )
      .then(() => {
        // 执行删除操作，可以是发送网络请求删除数据或执行前端视图上的删除操作
        // 假设这里使用axios发送网络请求删除数据，删除成功后给出提示
        axios.get("http://localhost:8080/shixun/user/delete?id="+uid)
            .then(response => {
              // 删除成功的逻辑
              ElMessage.success('删除成功！')

              // 刷新网页
              window.location.reload()

            })
            .catch(error => {
              // 错误处理
              ElMessage.error('删除失败！')
            })
      })
      .catch(() => {
        // 用户点击了"取消"按钮
      });
};

const recover = (uid) => {
  console.log('uid:', uid)
  ElMessageBox.confirm(
      '确定要恢复吗？',
      '提示',
      { confirmButtonText: '确定', cancelButtonText: '返回', type: 'warning' }
  )
      .then(() => {
        // 发送恢复请求
        axios.get("http://localhost:8080/shixun/user/reuser?id="+uid)
            .then(response => {
              // 恢复成功的逻辑
              ElMessage.success('恢复成功！')
              // 刷新网页
              window.location.reload()
            })
            .catch(error => {
              // 错误处理
              ElMessage.error('恢复失败！')
            })
      })
      .catch(() => {
        // 用户点击了"取消"按钮
      })
}

//  修改身份
const changeRole = (uid) => {
  console.log("uid:"+uid)
  ElMessageBox.confirm(
      '确定要将身份切换为学生吗？',
      '提示',
      { confirmButtonText: '确定', cancelButtonText: '返回', type: 'warning' }
  )
      .then(() => {
        // 执行删除操作，可以是发送网络请求删除数据或执行前端视图上的删除操作
        // 假设这里使用axios发送网络请求删除数据，删除成功后给出提示
        axios.get("http://localhost:8080/shixun/user/setStudent?id="+uid)
            .then(response => {
              // 删除成功的逻辑
              ElMessage.success('修改成功！')
              // 刷新网页
              window.location.reload()
            })
            .catch(error => {
              // 错误处理
              ElMessage.error('修改失败！')
            })
      })
      .catch(() => {
        // 用户点击了"取消"按钮
      });
};



//编辑
function edi(){
  ElMessageBox.confirm(
      'proxy will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
}

onMounted(()=>{
  handleCurrentChange(number.value)
});

function onSearch(){
  let key = keyword.value.trim();
  console.log("params =", key);
  if(key==""){
    handleCurrentChange(number.value);
  }else{
    userApi.search(key,'teacher').then(response => {
      console.log("response =", response);
      teacherList.data= response.data.data.list;
      console.log("teacherList.data =", teacherList);
    })
  }
};



function handleCurrentChange(number){
  pageNum=number;
  userApi.getList(pageNum,'teacher').then((response)=>{
    list.data=response.data.data.list;
    console.log("list.data",list.data);
    total.value=response.data.data.total;
    pageSize.value=response.data.data.pageSize;
    pageNum=response.data.data.pageNum;
    teacherList.data=list.data;

  });
}
</script>

<style scoped>
.box{
  margin-top:30px;
}
.pagination{
  margin-top:15px;
}
.oper-left{
  float:left;
}
.oper-right{
  float: right;
}

</style>